<template>
  <div class="rate-dialog">
    <div class="rate-container" :style="{ width: width }" v-clickOutside="clickOutside">
      <div class="rate-title">
        <span class="title">满意度评价</span>
        <img alt="" src="../../assets/images/rate_logo.webp" class="rate-logo" />
      </div>
      <div class="rate-content">
        <div class="survey-guide">{{ rateConfig?.guide || '请您对本次服务进行评价' }}</div>
        <!-- 星星 -->
        <el-rate v-model="rate" v-if="rateConfig?.rateType == 'star'" @change="selectStar()" />
        <div class="text-rate-container" v-if="rateConfig?.rateType == 'text' && rateItems">
          <div
            class="text-rate"
            v-for="item in rateItems"
            :key="item.score"
            @click="selectRate(item)"
          >
            <img :src="getTextRateIcon(item.score)" class="rate-icon" />
            <div class="rate-text" :class="{ selected: selectItem?.score == item.score }">
              {{ item.displayName }}
            </div>
          </div>
        </div>
        <div class="rate-desc" v-if="selectItem">{{ selectItem.description }}</div>
        <!-- 标签 -->
        <div class="tag-container" v-if="itemTags.length > 0">
          <div
            class="tag"
            v-for="tag in itemTags"
            :key="tag"
            :class="{ selected: selectTags.includes(tag) }"
            @click="clickTag(tag)"
          >
            {{ tag }}
          </div>
        </div>
        <!-- 文本框 -->
        <el-input
          v-model="rateContent"
          :autosize="{ minRows: 4, maxRows: 4 }"
          type="textarea"
          :placeholder="
            rateConfig?.commentGuide || '请留下您的宝贵意见，帮助我们为您提供更好的服务'
          "
          maxlength="200"
          style="margin-top: 10px"
        />

        <div class="action-btn">
          <el-button @click="cancelRate()" type="button">取消</el-button>

          <el-button
            :loading="isRating"
            :class="['send-btn', pageType == 'pc' ? 'pc-send-btn' : 'mobile-send-btn']"
            @click="submitRate()"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="RateDialog">
import { computed, onMounted, ref, onBeforeUnmount } from 'vue';
import rateLevel1 from '../../assets/images/rate_level1.webp';
import rateLevel2 from '../../assets/images/rate_level2.webp';
import rateLevel3 from '../../assets/images/rate_level3.webp';
import rateLevel4 from '../../assets/images/rate_level4.webp';
import rateLevel5 from '../../assets/images/rate_level5.webp';

const props = defineProps({
  //页面展示类型  pc  mobile
  pageType: {
    type: String,
    default: 'pc'
  },
  inputHeight: {
    type: String,
    default: '30px'
  }
});

import { useAppStore } from '../../stores';
import { ElMessage } from 'element-plus';
const appStore = useAppStore();
let rateConfig: any = appStore.rateConfig;

const rate = ref(0);
const rateContent = ref('');
const selectItem = ref<any>();
const rateItems = ref<any>();
//宽度
const width = ref('335px');
let isShow = false;
//是否正在评价
let isRating = ref(false);
onMounted(() => {
  setTimeout(() => {
    isShow = true;
  }, 1000);
  // 初始化数据 文本需要排除未勾选的条目
  rateItems.value = rateConfig?.items
    ?.filter((item: any) => {
      return rateConfig.rateType === 'text' ? item.isEnabled == 1 : true;
    })
    .sort((a: any, b: any) => a.score - b.score);

  rateItems.value?.forEach((item: any, index: number) => {
    if (item.isDefault == 0) {
      rate.value = index + 1;
      selectItem.value = item;
    }
  });
  if (props.pageType === 'mobile') width.value = '90%';
});
onBeforeUnmount(() => {
  isShow = false;
});

function getTextRateIcon(score: number) {
  return score === 1
    ? rateLevel1
    : score === 2
      ? rateLevel2
      : score === 3
        ? rateLevel3
        : score === 4
          ? rateLevel4
          : rateLevel5;
}

/**
 * 当前选中的条目 的标签
 */
const itemTags = computed(() => {
  if (selectItem.value == null || !selectItem.value.tags) {
    return [];
  }
  return selectItem.value.tags.split(',');
});

/**
 * 当前选中的标签
 */
const selectTags = ref<string[]>([]);

/**
 * 选择评价
 */
function selectRate(item: any) {
  selectItem.value = item;
  selectTags.value.length = 0;
}

/**
 * 选择星星
 */
function selectStar() {
  // 提交评价
  selectItem.value = rateItems.value[rate.value - 1];
  selectTags.value.length = 0;
}

/**
 * 点击标签
 * @param tag 标签
 */
function clickTag(tag: string) {
  if (selectTags.value.includes(tag)) {
    selectTags.value.splice(selectTags.value.indexOf(tag), 1);
  } else {
    selectTags.value.push(tag);
  }
}

function submitRate() {
  if (isRating.value) return;
  if (selectItem.value == null) {
    ElMessage({
      type: 'warning',
      message: '请打分！'
    });
    return;
  }
  isRating.value = true;
  const tags = selectTags.value.join(',');
  emit('submitRate', {
    score: selectItem.value.score,
    scoreDescription: selectItem.value.displayName,
    comment: rateContent.value || '',
    tags
  });
}
const emit = defineEmits(['close', 'submitRate']);
function clickOutside() {
  if (isShow && !isRating.value) {
    emit('close');
  }
}

function cancelRate() {
  emit('close');
}

function ratingEnd() {
  isRating.value = false;
}

defineExpose({
  ratingEnd
});
</script>
<style scoped lang="scss">
 $input-height: v-bind('$props.inputHeight');
 @import '@/styles/setInputHeight.scss';
.rate-dialog {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 100;
  min-height: 600px;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.4);

  .rate-container {
    width: 335px;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 8px;
    transform: translateY(-10%);
  }
}

.rate-title {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  padding: 4px 16px;
  border-radius: 8px 8px 0px 0px;
  background: linear-gradient(180deg, #c2d7ff 0%, #e1ebff 99.96%);
  box-sizing: border-box;
  .title {
    height: 22px;
    color: #333333;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
  }

  .rate-logo {
    width: 60px;
    height: 60px;
    position: absolute;
    right: 14px;
    bottom: 0;
    z-index: 10;
  }
}

.rate-content {
  width: 100%;
  height: fit-content;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .survey-guide {
    height: 22px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    line-height: 22px;
  }

  .text-rate-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    justify-content: space-between;

    .text-rate {
      min-width: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    .rate-icon {
      width: 24px;
      height: 24px;
    }

    .rate-text {
      margin-top: 4px;
      height: 18px;
      color: #333333;
      font-size: 12px;
      line-height: 18px;
      &.selected {
        color: var(--color-main-theme, #2b72fe);
      }
    }
  }
  .rate-desc {
    text-align: center;
    color: #333333;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px;
  }
  .tag-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
    justify-content: space-between;
    .tag {
      width: calc(50% - 10px);
      margin-bottom: 8px;
      height: 36px;
      border-radius: 8px;
      text-align: center;
      line-height: 36px;
      box-sizing: border-box;
      padding: 0 12px;
      font-size: 13px;
      border: 1px solid #dadada;
      background: #ffffff;
      color: #333333;
      cursor: pointer;
      &.selected {
        border: 1px solid var(--color-main-theme, #2b72fe);
        background: #eaf1ff;
        color: var(--color-main-theme, #2b72fe);
      }
    }
  }
}

.action-btn {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .send-btn {
    color: white;
    background-color: var(--color-main-theme, #2b72fe);
  }

  .pc-send-btn {
    width: 60px;
  }

  .mobile-send-btn {
    width: 100%;
  }
}
</style>
